<template>
  <div :class="$style.downloadBar">
    <div :class="$style.logo">
      <img src="~assets/common/logo.png">
    </div>
    <div :class="$style.desc">
      <p>JUANPI</p>
      <p>Free Shipping & Free Lucky Draws</p>
    </div>
    <div :class="$style.button">
      <v-button
        size="80px 24px"
        v-analytics.click="{
          action: 'Download Click',
          category: category,
          callback: download,
        }"
      >
        Download
      </v-button>
    </div>
  </div>
</template>
<script>
import button from '../button'

export default {
  name: 'downloadBar',
  props: ['category'],
  components: {
    vButton: button,
  },
  methods: {
    download() {
      location.href = 'http://in.juanpi.com/jump/go'
    },
  },
}
</script>
<style lang="scss" module>
.downloadBar {
  height: 64px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  color: #fff;
  align-items: center;
}

.desc {
  font-size: 12px;
  width: 208px;
  padding-left: 12px;
}

.logo {
  & > img {
    width: 48px;
    height: 48px;
  }
}

.button {
  color: #4A4A4A;
  button {
    font-size: 12px;
    border-radius: 4px;
    border: 0;
  }
}
</style>
